<template>
    <div class="changedress">
        <div class="addresstop">
            <span class="addressfont" @click="$router.back()"><</span>
            <div>
                <h1>更改地址</h1>
            </div>
        </div>
        <div class="list" style="border:none;padding:0;">
            <div class="tr">
                <h3>联系人</h3>
            </div>
            <div class="inputright" style="border-bottom: 1px solid gainsboro;">
                <input
                        type="text"
                        placeholder="姓名 1~6个字符"
                        v-model="name"
                        style="padding:20px 0 20px 0;"
                        autocomplete="off"
                        maxlength="6"
                />
            </div>
        </div>
        <div class="list">
            <div class="tr"></div>
            <div class="inputright">
                <input type="radio" name="sex" id="man" value="先生" v-model='sex'/>
                <input type="radio" name="sex" id="woman" value="女士" v-model='sex'/>
                <label for="man">
                    <div type="button" class="sexbtn">先生</div>
                </label>
                <label for="woman">
                    <div type="button" class="sexbtn">女士</div>
                </label>
            </div>
        </div>
        <div class="list">
            <div class="tr">
                <h3>电话</h3>
            </div>
            <div class="inputright">
                <input
                        type="text"
                        name="phonenum"
                        v-model="phonenum"
                        placeholder="联系号码"
                        autocomplete="off"
                        maxlength="11"
                />
            </div>
        </div>
        <div class="list">
            <div class="tr">
                <h3>楼号</h3>
            </div>
            <div class="inputright">
                <input type="text" name="lou" v-model="lou" placeholder="如 4号公寓楼" autocomplete="off" />
            </div>
        </div>
        <div class="list">
            <div class="tr">
                <h3>门牌号</h3>
            </div>
            <div class="inputright">
                <input type="text" name="su" v-model="su" placeholder="如 304" autocomplete="off" />
            </div>
        </div>
        <button class="btn"  @click="suresubmit">确定</button>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    export default {
        name: "changedress",
        data() {
            return {
                id:this.$route.query.id,
                name: this.$store.state.dresslist[this.$route.query.id].dressname,
                phonenum: this.$store.state.dresslist[this.$route.query.id].dressphone,
                lou: this.$store.state.dresslist[this.$route.query.id].dresslou,
                su: this.$store.state.dresslist[this.$route.query.id].dresssu,
                sex:this.$store.state.dresslist[this.$route.query.id].dresssex,
                btntype: "submit"

            };
        },
        methods: {
            ...mapMutations(['setdresslist','setdress']),
            rephone() {
                if (/^1[3456789]\d{9}$/.test(this.phonenum)) {
                    return true;
                } else {
                    return false;
                }
            },
            suresubmit() {
                if (this.name == "") {
                    alert("用户名不能为空");
                    this.btntype = "button";
                }else if (this.lou == "") {
                    alert("公寓楼号不能为空");
                    this.btntype = "button";
                }

                else if (this.su == "") {
                    alert("宿舍号不能为空");
                    this.btntype = "button";
                }
                else if (this.phonenum == "") {
                    alert("联系号码不能为空");
                    this.btntype = "button";
                    return;
                }
                else if (!this.rephone()) {
                    alert("联系号码格式有误");
                    this.btntype = "button";
                }
                else{
                    var sure='';
                    var id=this.id;
                    var newdress= {
                        dressname: this.name,
                        dresssex: this.sex,
                        dressphone:this.phonenum,
                        dresslou: this.lou,
                        dresssu: this.su
                    };
                    if(this.$store.state.dresslist.indexOf(this.$store.state.dress)==id){
                        sure=true;
                    }else{
                        sure=false;
                    }
                    this.axios.post('http://127.0.0.1:3000/changedress',{sure:sure,phone:this.$store.state.phone,id:id,newdress:newdress})
                        .then((res)=>{
                            if(res.data.state==200){
                                if(sure){
                                    this.$store.commit('setdresslist',res.data.msg);
                                    this.$store.commit('setdress',res.data.id)
                                    this.$router.push('/dress')
                                }else{
                                    var id=this.$store.state.dresslist.indexOf(this.$store.state.dress)
                                    this.$store.commit('setdresslist',res.data.msg);
                                    this.$store.commit('setdress',id)
                                    this.$router.push('/dress')
                                }

                            }
                        })
                        .catch((err)=>{
                            console.log(err)
                        })
                }
            }
        },
    };
</script>

<style scoped>
    input[type="radio"] {
        display: none;
    }
    .list {
        width: 95%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 1px solid gainsboro;
        padding: 20px 0 20px 0;
    }
    .tr {
        text-align: left;
        width: 20%;
    }
    .inputright {
        width: 80%;
    }
    .inputright input {
        outline: none;
        background: none;
        border: none;
        height: 20px;
        font-size: 20px;
        padding: 10px 0 10px 0;
    }
    .inputright .sexbtn {
        display: inline-block;
        text-align: center;
        line-height: 32px;
        width: 80px;
        height: 38px;
        outline: none;
        background: white;
        border: 1px solid gainsboro;
        border-radius: 5px;
        margin-right: 15px;
        font-size: 18px;
    }
    #man:checked + #woman + label .sexbtn {
        background: rgb(238, 247, 255);
        color: rgb(35, 149, 255);
    }
    #woman:checked + label + label .sexbtn {
        background: rgb(238, 247, 255);
        color: rgb(35, 149, 255);
    }
    .addressfont {
        cursor: pointer;
        font-size: 28px;
    }
    .addresstop {
        padding: 5px;
        display: flex;
        background: rgb(0,160,255);
        color: white;
    }
    .addresstop div {
        margin: 0 auto;
    }
    .btn {
        display: block;
        outline: none;
        border: none;
        background: rgb(0, 215, 98);
        width: 80%;
        height: 48px;
        font-size: 20px;
        margin: 20px auto;
        color: white;
    }
</style>